<template>
  <el-row class="step-row">
    <el-col class="step-tag" :span="24">
      <el-tag
        :type="info.type"
        effect="plain">
        {{ info.label }}
      </el-tag>
    </el-col>
    <el-col :span="24">
      <el-steps :space="100" direction="vertical" :active="active">
        <el-step class="mt20" v-for="(item, index) in steps" :key="index" 
          :title="item.name 
          + ' 审核人：' + (item.nickname ? item.nickname : item.verify_person) ">
          <template slot="description">
            <p>审核状态：{{stepInfo(item.state)}}</p>
            <p v-if="item.v_time">审核时间：{{item.v_time}}</p>
            <p v-if="item.back_reason">退回原因：{{item.back_reason}}</p>
            <p v-if="item.reason">备注：{{item.reason}}</p>
          </template>
        </el-step>
      </el-steps>
    </el-col>
  </el-row>
</template>

<script>
import { querySteps } from '@/api/approval/approve'

export default {
  name: '',
  props: {
    data: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      steps: [],
      info: {},
      active: -1
    }
  },
  created() {
    this.querySteps()
  },
  methods: {
    stepInfo(e){
      let state = ''
      switch (e) {
        case 0:
          state = '已驳回'
          break;
        case 1:
          state = '已通过'
          break;
        case 2:
          state = '待审核'
          break;
        case 3:
          state = '已退回'
          break;
        case 4:
          state = '已转签'
          break;
        default:
          state = '未审核'
          break;
      }
      return state
    },
    querySteps(){
      querySteps({
        laa_id: this.data.id,
        lap_id: this.data.lap_id
      }).then(res => {
        this.steps = res.list
        this.active = res.active
        let apply = res.apply
        let info = {}
        info.state = apply.state
        switch (apply.state) {
          case 0:
            info.label = '已驳回'
            info.type = 'danger'
            break;
          case 1:
            info.label = '已通过'
            info.type = 'success'
            break;
          case 2:
            info.label = '进行中'
            info.type = ''
            break;
          case 3:
            info.label = '已撤销'
            info.type = 'warning'
            this.active = -1
            break;
          default:
            break;
        }
        this.info = info
      }).catch(err => {
        this.$message.error(err.msg)
      })
    }
  }
}
</script>

<style scoped>
.step-row{
  padding: 0 10px;
}
.step-tag{
  padding: 0 40px 20px 40px;
  text-align: right;
}
</style>
